<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
  font-family: sans-serif;
  width: 350px;
}

label {
  font-weight: bold;  
}

div {
  padding-bottom: 20px;
}

input[type="text"] {
  padding: 5px;
  width: 150px;
}

p {
  background: #FFC125;
  color: #5E2612;
  padding: 10px;
  visibility: hidden;
}

    </style>
</head>
  <body>
    <div>
      <label for="customname">输入自定义名字：</label>
      <input id="customname" type="text">
    </div>
    <div>
      <button class="randomize">生成随机笑话</button>
    </div>
    <p class="story"></p>
  </body>
  <script>
const customName = document.getElementById('customname');
const randomize = document.querySelector('.randomize');
const story = document.querySelector('.story');

function randomValueFromArray(array) {
  return array[Math.floor(Math.random() * array.length)];
}
var storyText = '今天气温 34 摄氏度，:inserta:出去遛弯。当走到:insertb:门前时，突然就:insertc:。人们都惊呆了，name全程目睹但并没有慌，因为:inserta:是一个 130 公斤的胖子，天气又辣么热。';
var insertX  = ['怪兽威利','大老爹','圣诞老人'];
var insertY = ['肯德基','迪士尼乐园','白宫'];
var insertZ = ['自燃了','在人行道化成了一坨泥','变成一条鼻涕虫爬走了'];
randomize.addEventListener('click', result);
function result() {
  var newStory = storyText;
  var xItem = randomValueFromArray(insertX);
  console.log('随机名字是',xItem)
  var yItem = randomValueFromArray(insertY);
  var zItem = randomValueFromArray(insertZ);
  if(customName.value !== '') {
    let name = customName.value;
    newStory = newStory.replace('name',name);
  }
  newStory = newStory.replace(':inserta:',xItem);
  console.log(newStory);
  newStory = newStory.replace(':insertb:',yItem);
  newStory = newStory.replace(':insertc:',zItem);
  newStory = newStory.replace(':inserta:',xItem);
  story.textContent = newStory;
  story.style.visibility = 'visible';
}
  </script>
</html>